<template>
  <by-background />

  <by-navigation-bar title="个人信息"/>

  <view class="padding-20">
    <view class="card bg-white padding-lr-20 padding-tb-40">
      <view class="flex-row align-end margin-bottom-40">
        <text class="text-32 color-t1 margin-right-20 text-bold">个人照片</text>
        <text class="text-26 color-placeholder">({{ total }}/10)</text>
        <view v-if="pkProperties?.picUrls" class="tag flex-row flex-center margin-left-20">
          <text class="color-t2 text-20">审核中</text>
        </view>
      </view>

      <view class="padding-left-26">
        <by-upload v-model="photos" has-header :count="10" @change="changeImg" />
      </view>
    </view>

    <view class="card bg-white padding-lr-20 padding-top-40 padding-bottom-10 margin-top-20">
      <view class="margin-bottom-30">
        <text class="text-32 color-t1 text-bold">基础信息</text>
      </view>
      <by-cell
        v-for="(item,index) in list"
        :key="index"
        :label="item.label"
        :model-value="item.isAudit || item.value"
        :border="index < list.length - 1"
        :placeholder="`请输入${ item.label }`"
        show-arrow
        @click="jump(item.src)"
      >
        <template v-if="item.isAudit" #labelEnding>
          <view class="tag flex-row flex-center margin-left-20">
            <text class="color-t2 text-20">审核中</text>
          </view>
        </template>
      </by-cell>
    </view>
  </view>

  <by-upload-tip />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { jump, toast } from '@/common/util'
import { getUserInfo, updateInfo } from '@/common/api'
import type { AnyObject } from '@/common/types'

const userStore = useUserStore()
const total = ref(0)
const photos = ref('')
const list = shallowRef<AnyObject[]>([])
let pkProperties:any
async function init() {
  await getUserInfo()
  const userInfo = computed(() => userStore.userInfo)
  pkProperties = computed(() => userStore.userInfo.pkProperties)
  list.value = reactive([
    { label: '昵称', src: '/pages/set-info/index?type=0', value: userInfo.value.nickname, isAudit: computed(() => pkProperties.value?.nickname ?? '') },
    { label: '简介', src: '/pages/suggest/index?type=3', value: userInfo.value.profile, isAudit: computed(() => pkProperties.value?.profile ?? '') },
    { label: '微信', src: '/pages/set-info/index?type=1', value: userInfo.value.wxNo, isAudit: computed(() => pkProperties.value?.wxNo ?? '') },
    { label: '手机号', src: '/pages/set-info/index?type=2', value: userInfo.value.contactTel, isAudit: computed(() => pkProperties.value?.contactTel ?? '') }
  ])
}
init()

onShow(async() => {
  await getUserInfo()
  photos.value = userStore.userInfo.pkProperties?.picUrls ?? userStore.userInfo?.picUrls
  if (photos.value) total.value = photos.value.split(',').length
})

async function changeImg(e:AnyObject) {
  total.value = e.total
  await updateInfo({
    picUrls: photos.value
  })
  toast('修改成功，请等待审核')
}

</script>

<style scoped lang="scss">
@include setPadding(left, 26);

.card{
  border-radius:16rpx;

  .tag{
    padding: 4rpx 12rpx;
    background: $color-border;
    border-radius: 8rpx;
  }
}
</style>
